<template>
  <div>
    <div style="margin-top: 1%;text-align:center;">
      <el-button @click="returnPage()" style="font-size: 20px;margin-right: 1%" type="primary">返回</el-button>
      <el-select  v-model="form.clazzId"
                  style="width: 22%;margin-right: 1%"
                  clearable filterable
                  placeholder="请选择班级">
        <el-option v-for="item in clazz" :key="item.clazzId"
                   :label="item.clazzId + '班'" :value="item.clazzId">
        </el-option>
        <el-option label="其它学生" :value="''"/>
      </el-select>
      <el-button @click="findGradeTemps()" style="font-size: 20px;" type="info">立即查看</el-button>
      <el-button @click="exportExcel()" style="font-size: 20px;" type="primary">导出Excel</el-button>
    </div>
    <div style="margin-top: 1%;text-align:center;">
      <span style="font-size:22px;">课程名称: </span>
      <span style="font-size:22px;font-weight: bold;color:blueviolet">{{course.courseName}}</span>
      <span style="font-size:22px;">; 平时成绩:</span>
      <span style="font-size:22px;font-weight: bold">{{teachTask.usualPct}}%</span>
      <span style="font-size:22px;">; 实践成绩:</span>
      <span style="font-size:22px;font-weight: bold">{{teachTask.expPct}}%</span>
      <span style="font-size:22px;">; 期中成绩:</span>
      <span style="font-size:22px;font-weight: bold">{{teachTask.midPct}}%</span>
      <span style="font-size:22px;">; 期末成绩:</span>
      <span style="font-size:22px;font-weight: bold">{{teachTask.finalPct}}%</span>
      <span style="font-size:22px;">; 其它成绩:</span>
      <span style="font-size:22px;font-weight: bold">{{teachTask.otherPct}}%; </span>
      <span style="font-size:22px;color: #e6a23c;">及格分:</span>
      <span style="font-size:22px;font-weight: bold;color: #e6a23c;">{{teachTask.passingScore}}; </span>
      <span style="font-size:22px;color: #67c23a;"> 满分:</span>
      <span style="font-size:22px;font-weight: bold;color: #67c23a">{{teachTask.fullScore}};</span>
    </div>
    <template style="margin-top: 2%">
      <el-table :data="pageInfo.list" style="width: 100%">
        <el-table-column label="" width="60">
        </el-table-column>
        <el-table-column label="学号" width="220" prop="stuId" sortable>
          <template slot-scope="scope">
            <span>{{scope.row.stuId}}</span>
          </template>
        </el-table-column>
        <el-table-column label="姓名" width="220">
          <template slot-scope="scope">
            <span>{{scope.row.stuName}}</span>
          </template>
        </el-table-column>
        <el-table-column label="平时成绩"  width="200">
          <template slot-scope="scope">
                        <span v-if="teachTask.usualPct > 0" style="font-size:22px;font-weight: bold">
                            {{scope.row.usualScore}}
                        </span>
          </template>
        </el-table-column>
        <el-table-column label="实践成绩"  width="200">
          <template slot-scope="scope">
                        <span v-if="teachTask.expPct > 0" style="font-size:22px;font-weight: bold">
                            {{scope.row.expScore}}
                        </span>
          </template>
        </el-table-column>
        <el-table-column label="期中成绩"  width="200">
          <template slot-scope="scope">
                        <span v-if="teachTask.midPct > 0" style="font-size:22px;font-weight: bold">
                            {{scope.row.midScore}}
                        </span>
          </template>
        </el-table-column>
        <el-table-column label="期末成绩"  width="200">
          <template slot-scope="scope">
                        <span v-if="teachTask.finalPct > 0" style="font-size:22px;font-weight: bold">
                            {{scope.row.finalScore}}
                        </span>
          </template>
        </el-table-column>
        <el-table-column label="其它成绩"  width="200">
          <template slot-scope="scope">
                        <span v-if="teachTask.otherPct > 0" style="font-size:22px;font-weight: bold">
                            {{scope.row.otherScore}}
                        </span>
          </template>
        </el-table-column>
        <el-table-column label="实际最终成绩"  width="160">
          <template slot-scope="scope">
                        <span v-if="parseInt(scope.row.totalScore) >= parseInt(teachTask.passingScore)"
                              style="color: #67C23A;font-size:24px;font-weight: bold">{{scope.row.totalScore}}</span>
            <span v-if="parseInt(scope.row.totalScore) < parseInt(teachTask.passingScore)"
                  style="color: #F56C6C;font-size:24px;font-weight: bold">{{scope.row.totalScore}}</span>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-bottom: 1%;"></div>
      <el-pagination
          style="text-align: center;"
          background
          layout="total,prev, pager, next"
          :total="pageInfo.total"
          :page-size="pageInfo.pageSize"
          @current-change="handleCurrentChange">
      </el-pagination>
    </template>
  </div>
</template>

<script>
export default {
  data(){
    return {
      form:{
        teachId: '',
        clazzId: '',
        courseId: '',
      },
      teachTask:{},
      course:{},
      clazz:[],
      currPage: 1,
      pageInfo:{},
    }
  },
  created() {
    this.form.teachId = this.$route.params.teachId;
    this.taskInit();//课程安排初始化
  },
  methods:{
    exportExcel(){//excel导出
      let path = 'http://localhost:8081/grade/getGradeExcel';
      this.$ajax.post(path,this.form).then(res=>{
        console.log(res.data.list);
        let fileName =this.teachTask.teacherId + ' - ' + this.course.courseName + ' - '
            + this.teachTask.teachName + ' - ' + (this.form.clazzId!==''?this.form.clazzId+'班':'其它学生');
        if(res.data.list != null && res.data.list.length > 0)
          this.export2Excel(res.data.list,fileName);
        else
          this.$message.error('没有可以导出的成绩清单!');
      })
    },
    findGradeTemps(){//查找
      this.currPage = 1;
      this.getData();
    },
    handleCurrentChange(val){//翻页
      this.currPage = val;
      this.getData();
    },
    getData(){//获取数据
      let path = `http://localhost:8081/grade/getGrades/${this.currPage}`;
      this.$ajax.post(path,this.form).then(res=>{
        this.pageInfo = res.data;
      })
    },
    taskInit(){//课程安排初始化
      let path = 'http://localhost:8081/teach/getTeachTasks/1';
      this.$ajax.post(path,this.form).then(res=>{
        let result = res.data.list[0];
        if(res.data.list.length === 1 && parseInt(result.teachState) === 2){
          this.teachTask = result;
          this.clazz = result.clazzes;
          this.getData();
          this.getCourse();
        }
        else{
          alert("课程安排不存在或没有权限!");
          this.returnPage();
        }
      })
    },
    getCourse(){//获得课程
      this.form.courseId = this.teachTask.courseId;
      let path = 'http://localhost:8081/course/getCourseList/1';
      this.$ajax.post(path,this.form).then(res=>{
        this.course = res.data.list[0];
      })
    },
    export2Excel(dataList,fileName) {//导出excel
      require.ensure([], () => {
        const { export_json_to_excel } = require('../../excel/Export2Excel');
        const tHeader = ['学号', '姓名','平时成绩','实践成绩','期中成绩','期末成绩','其它成绩','最终成绩'];
        const filterVal = ['stuId', 'stuName','usualScore','expScore',
          'midScore','finalScore','otherScore','totalScore'];
        const list = dataList;
        const data = list.map(v => filterVal.map(j => v[j]))//formatJson
        export_json_to_excel(tHeader, data, fileName);
      })
    },
    returnPage(){//返回
      let type = JSON.parse(sessionStorage.getItem("type"))
      this.$router.push('/' + type + '/gradeQuery');
    },
  }
}
</script>

<style scoped>
span{
  font-size: 18px;
}
</style>